<template>
	<scroll-view scroll-y class="viewport" refresher-enabled :refresher-triggered="isTriggered"
		@refresherrefresh="onRefresherrefresh" @scrolltolower="onScrolltolower">
		<view class="flex">
			<view class="select" @click="Selection('1001')">
				{{query.destinationsName}}<text class="icon icon-jiantou2"></text>
			</view>
			<view class="select"  @click="Selection('1003')">
				品牌<text class="icon icon-jiantou2"></text>
			</view>
			<view class="select"  @click="Selection('1002')">
				<view>
					<view class="xs">
						住<text class="date">{{formatDate(query.CheckIn,'MM-DD')}}</text>
					</view>
					<view class="xs">
						离<text class="date">{{formatDate(query.CheckOut,'MM-DD')}}</text>
					</view>
				</view>
				<view class="unit">
					{{calculateStayNights(query.CheckIn,query.CheckOut)}}晚
				</view>
				<text class="icon icon-jiantou2"></text>
			</view>
			<view class="select" @click="SortClick">
				排序<text :class="query.Sort=='1'?'icon icon-paixu':'icon-paixu1'"></text>
			</view>
		</view>

		<listSkeletonVue v-if="loading" />
		<view class=" card hotel-info" v-for="item in HotelList" @click="Navigator(item)">
			<image :src="item.pictures && item.pictures.length > 0 ? item.pictures[0] : '/static/hotel-default.jpg'" mode="aspectFill" class="hotel-img" @error="() => item.pictures = ['/static/hotel-default.jpg']">
			</image>
			<view class="right">
				<view class="name ellipsis-1">{{item.name}}</view>
				<view class="sm ellipsis-2">{{item.nameEn}}</view>
				<!-- <view class="xs">
					<text class="date">住：{{query.CheckIn}}</text> | <text class="date">离：{{query.CheckOut}}</text> |
					{{calculateStayNights(query.CheckIn,query.CheckOut)}}晚
				</view> -->
				<view class="link "><text class="price">￥{{item.refPrice}}</text>/<text class="xs">晚</text></view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import type { Hotel } from '@/types'
	import { getHotelList } from '@/api/home'
	import { onLoad } from '@dcloudio/uni-app';
	import { calculateStayNights ,formatDate} from '../../utils';
	import listSkeleton from './components/list-skeleton.vue';
	const loading = ref(false)
	const Navigator = (item : Hotel) => {
		uni.navigateTo({
			url: `/pages/hotel/detail?id=${item.id}&destinationId=${item.destinationId}&params=${JSON.stringify(query.value)}`
		})
	}
	const query = ref({
		Page: 1,
		PageSize: 10,
		Sort:'1'
	})
	const HotelList = ref<Hotel[]>(null)
	const pages = ref(null)
	const isTriggered = ref(false)
	onLoad((options) => {
		query.value = { ...JSON.parse(options.params), ...query.value }
		getList()
	})
	const Selection = (type:string)=>{
		if(type=='1001'){
			uni.navigateTo({
				url:'/pages/citys/index?type='+type+'&params='+JSON.stringify(query.value)
			})
		}else if(type=='1002'){
			uni.navigateTo({
				url:'/pages/calendar/index?type='+type+'&params='+JSON.stringify(query.value)
			})
		}else{
			uni.navigateTo({
				url:'/pages/menu/index?type='+type+'&params='+JSON.stringify(query.value)
			})
		}
	}
	
	const SortClick = ()=>{
		query.value.Sort=query.value.Sort=='4'?'1':'4'
		getList()
	}
	const getList = async () => {
		loading.value = true
		const res = await getHotelList(query.value)
		HotelList.value = res.data.data
		console.log(res)
		pages.value = res.data?.pageCount
		loading.value = false
		
	}
	const onScrolltolower = async () => {
		loading.value=true
		if (query.value.Page > pages.value) return
		query.value.Page++
		const res = await getHotelList(query.value)
		HotelList.value = HotelList.value.concat(res.data.data)
		loading.value=false
	}
	const onRefresherrefresh = async () => {
		isTriggered.value = true
		query.value.Page = 1
		const res = await getHotelList(query.value)
		HotelList.value = res.data?.data
		isTriggered.value = false
	}
</script>

<style lang="scss" scoped>
	.viewport {
		width: 100vw;
		height: 100vh;
		background-color: #f7f8fa;
	}

	.flex {
		display: flex;
		// align-items: center;
		flex-wrap: wrap;
		margin: 32rpx 20rpx;
		.select {
			font-size: 24rpx;
			color: #333;
			border: 1px solid #f7f7f7;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			margin-right: 20rpx;
			box-shadow: 0 3px 10px #e7e7e7;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.unit{
				color: #fff;
				background-color: $uni-color-primary;
				font-size: 20rpx;
				padding: 5rpx 10rpx;
				margin-left:10rpx;
				border-radius: 10rpx;
			}
			.xs{
				font-size: 24rpx;
			}
			.date{
				color: $uni-color-primary;
				padding-left: 10rpx;
			}
			.icon {
				font-size: 24rpx;
				padding-left: 10rpx;
			}
			.icon-paixu{
				font-size: 32rpx;
				padding-left: 10rpx;
			}
			.icon-paixu1{
				font-size: 32rpx;
				padding-left: 15rpx;
			}
		}
	}

	.hotel-info {
		display: flex;
		padding: 30rpx;
		border-bottom: 1px solid #f7f7f7;

		.hotel-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}

		.right {
			flex: 1;
			padding-left: 20rpx;
			font-size: 28rpx;
			line-height: 48rpx;

			.name {
				width: 420rpx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}

			.sm {
				color: #666;
			}

			.xs {
				font-size: 24rpx;
				vertical-align: text-bottom;
			}

			.date {

				color: $uni-color-primary;
				font-weight: 500;
			}

			.link {
				display: flex;
				justify-content: end;
				align-items: end;
				color: #f97316;

			}

			.price {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
</style>